<template>
  <div class="all">
    <!-- <div class="informa"> -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline=true>
      <div class="informa">
        <div class="tetli"> 店铺信息</div>
        <el-form-item label="门店账号：" prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="邮箱/用户名/手机号"></el-input>
        </el-form-item>
        <el-form-item label="门店名称：" prop="storeName">
          <el-input v-model="ruleForm.storeName" placeholder="请输入门店名称" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="门店编码：" prop="storeNo">
          <el-input v-model="ruleForm.storeNo" placeholder="请输入门店名称" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="店铺分类：" prop="storeType">
          <el-select v-model="ruleForm.storeType" placeholder="请选择店铺类型" clearable style="width:40vw;">
            <el-option v-for="(item,index) in shopClass" :key="index" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="所在地区：" prop="provinceName">
          <!-- 省 -->
          <el-form-item  prop="provinceName" style="display: inline-flex;margin-right: 0px">
            <el-select v-model="ruleForm.provinceName" placeholder="请选择省" clearable style="width:10vw;" @change="provinceChange($event)" value-key="id">
              <el-option v-for="(item,index) in provinceData" :key="index" :label="item.name" :value="item"> </el-option>
            </el-select>
          </el-form-item>
          <!-- 市 -->
           <el-form-item  prop="cityName" style="display: inline-flex;margin-right: 0px">
            <el-select v-model="ruleForm.cityName" placeholder="请选择市" clearable style="width:10vw;" @change="cityNameChange($event)" value-key="id">
              <el-option v-for="(item,index) in cityData" :key="index" :label="item.name" :value="item"> </el-option>
            </el-select>
           </el-form-item>
          <!-- 区 -->
           <el-form-item  prop="districtName" style="display: inline-flex;margin-right: 0px">
            <el-select v-model="ruleForm.districtName" placeholder="请选择区" clearable style="width:10vw;" @change="districtChange($event)" value-key="id">
              <el-option v-for="(item,index) in districtData" :key="index" :label="item.name" :value="item"> </el-option>
            </el-select>
           </el-form-item>
          <!-- 街道 -->
          <el-form-item  prop="streetName" style="display: inline-flex;margin-right: 0px">
           <el-select v-model="ruleForm.streetName" placeholder="选择街道" clearable style="width:10vw;" @change="streetChange($event)" value-key="id">
            <el-option v-for="(item,index) in streetData" :key="index" :label="item.name" :value="item"> </el-option>
          </el-select>
        </el-form-item>
        </el-form-item>
        <el-form-item label="详细地址：" prop="address">
          <el-input v-model="ruleForm.address" placeholder="请输入详细地址"></el-input>
        </el-form-item>
          <el-form-item label="所属商户："  v-if="JSON.parse(this.$store.state.user.userInfo).userType != 0">
           <el-input v-model="MerchantId"></el-input>
        </el-form-item>
        <el-form-item label="所属商户：" prop="mchId" class="phones" v-else> 
          <el-select v-model="ruleForm.mchId" placeholder="请选择" clearable class="select" @change="selectMerchantId($event)" style="width:40vw !important;" value-key="id">
            <el-option v-for="item in merchantName" :key="item.id" :label="item.mchName" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>

         <div class="aptitudes">
               <el-form-item label="门店logo：" prop="logoImage">
                <el-upload
                  :action="uploadUrl"
                  :data="{projectId: 4,useDay:1,path:'upload/portals/marchant'}"
                  list-type="picture-card"
                  :on-preview="logoPreview"
                  :on-success="handlePictureCardPreview"
                  :file-list="logoList"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="logoDialog"> 
                 <img width="100%" :src="logoImageUrl" alt=""> 
               </el-dialog>
              </el-form-item>
             <el-form-item label="门店实景图：" prop="storeImage">
                <el-upload
                  :action="uploadUrl"
                  :headers="header"
                  :data="{projectId: 4,useDay:1,path:'upload/portals/marchant'}"
                  list-type="picture-card"
                  :on-preview="storeImgPreview"
                  :file-list="storeImgList"
                  :on-success="handlestoreImg"
                  :on-remove="RemovebstoreImg">
                  <i class="el-icon-plus"></i>
                </el-upload>
                 <el-dialog :visible.sync="storeImgDialog"> 
                  <img width="100%" :src="storeImgUrl" alt=""> 
                </el-dialog>
             </el-form-item>
          </div>

          <div>
            <el-form-item label="绑定门店："><el-switch v-model="value1" @change="switchChange"></el-switch></el-form-item>
            <el-form-item label="启用线上店铺："><el-switch v-model="value2" @change="switchChange2"></el-switch></el-form-item>
          </div>
      </div>
      
      <div class="informa">
        <div class="tetli">经营者信息</div>
        <el-form-item label="门店负责人：" prop="contacts">
          <el-input v-model="ruleForm.contacts"  placeholder="请输入门店负责人"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" prop="contactPhone">
          <el-input v-model="ruleForm.contactPhone" placeholder="请输入联系方式" type="number"></el-input>
        </el-form-item>
        <el-form-item label="门店邮箱：" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱" @blur="sendEmail"></el-input>
        </el-form-item>
      </div>

       <div class="informa">
        <div class="tetli">营业信息</div>
        <el-form-item label="纳税人识别号：" prop="taxpayerNo">
          <el-input v-model="ruleForm.taxpayerNo" placeholder="请输入纳税人识别号"></el-input>
        </el-form-item>
        <el-form-item label="上传营业执照：" prop="licenseImage">
            <el-upload
                :action="uploadUrl"
                :headers="header"
                :on-preview="licensePreview"
                :data="{projectId: 4,useDay:1,path:'upload/portals/marchant'}"
                list-type="picture-card"
                :file-list="licenseImgList"
                :on-success="handlelicenseImg"
                :on-remove="RemoveblicenseImg">
                <i class="el-icon-plus"></i>
                <el-dialog :visible.sync="licenseDialog">
                  <img width="100%" :src="licenseUrl" alt="" style="object-fit: cover;"/>
                </el-dialog>
            </el-upload> 
            </el-form-item>
      </div>
       <div class="submit"><el-button type="primary" @click="submitForm('ruleForm')">确认</el-button> <el-button>取消</el-button></div>
    </el-form>
    <!-- </div> -->
  </div>
</template>

<script>
import { upload } from '@/components/upload-elementui'
import {provinceMerchabt, addShopMerchabt, streetMerchabt, getMerchantList, reviseShopMerchabt} from '@/api/merchants'
import {myMixin} from '@/layout/mixin/ResizeHandler'
export default {
  mixins:[myMixin],
  data() {
    //   let checkEmail = (rule, value,callback) =>{//验证邮箱
    //   const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    //   if(value != '' && !regEmail.test(value)) {
    //     callback(new Error('请输入有效的邮箱')); 
    //   }
    // }
    return {
       MerchantId:JSON.parse(this.$store.state.user.userInfo).name,
      uploadUrl: `${process.env.VUE_APP_BASE_API}/cloudApi/datacenter/file/uploadFile`,//图片上传地址
      imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
      logoDialog:false,//logao图片弹窗
      storeImgDialog:false,//实景图片弹窗
      licenseDialog:false,//营业执照弹窗
      logoImageUrl:null,//logo弹窗地址
      storeImgUrl:null,//实景图弹窗地址
      licenseUrl:null,//营业执照弹窗地址
      logoList:[],//logo图片地址数组
      storeImgList:[],//实景图数组
      licenseImgList:[],//营业执照数组图
      merchantValue:'',//所属商户绑定的
      selectedItem:{},
      valueId:'',//商户名或id
      provinceData:[],//省数据
      cityData:[],//市数据
      districtData:[],//区的数据
      streetData:[],//街道数据
      value1:false,
      value2:false,
      header:{ContentType:"multipart/form-data"},
      ruleForm: {
        creatorId:JSON.parse(this.$store.state.user.userInfo).id,
        storeNo:null,//门店编码
        userName:'',//账号
        storeName:'',//店铺名
        storeType:'',//店铺类型
        address:'',//详细地址
        mchId:null,
        storeLogo:'',//门店logo
        storeImg:'',//门店实景图
        contacts:'',//门店联系人
        contactPhone:'',//联系方式
        email:'',//邮箱
        taxpayerNo:'',//纳税人识别号
        licenseImg:'',//营业执照图片
        bindStatus:'',//绑定状态
        isPhysicalStore:'',//是否有实体店 0 没有 1 有
        provinceName:'',//省名称
        cityName:'',//市名称
        districtName:'',//区的名称
        streetName:'',//街道名称
        province:'',//省的ID
        city:'',//市的ID
        district:'',//区的ID
        street:'',//街道ID
        operationTime:''//操作时间
       },
      shopClass:[{value:1,label:'平台'},{value:2,label:'加盟'},{value:3,label:'自营'},{value:4,label:'联盟'},{value:5,label:'专卖'},{value:6,label:'其他'}],
      merchantName:[],//商户数据
      rules: {//表单验证
        userName: [{ required: true, message: '请输入账号', trigger: 'blur' },],
        storeName:[ { required: true, message: '请输入店铺名', trigger: 'blur' }],
        storeNo:[ { required: true, message: '请输入店铺编码', trigger: 'blur' }],
        storeType:[{ required: true, message: '请选择店铺类型', trigger: 'change' }],
        provinceName:[{ required: true, message: '请选择所在省份', trigger: 'change' }],
        cityName:[{ required: true, message: '请选择所在市', trigger: 'change' }],
        districtName:[{ required: true, message: '请选择所在区', trigger: 'change' }],
        streetName:[{ required: true, message: '请选择所在街道', trigger: 'change' }],
        address:[ { required: true, message: '请输入详细地址', trigger: 'blur' }],
        logoImage:[{ required: true, message: '请上传门店logo附件' }],
        storeImage:[{ required: true, message: '请上传门店实景图附件' }],
        licenseImage:[{ required: true, message: '请上传营业执照附件' }],
        contacts:[ { required: true, message: '请输入门店负责人', trigger: 'blur' }],
        contactPhone:[{ required: true, message: '请输入手机号码', trigger: 'blur' },
         { min: 11, max: 11, message: '您输入的数字长度有误', trigger: 'blur' }],
        email:[{ required: true, message: '请输入邮箱', trigger: 'blur' },
      ],
        taxpayerNo:[{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }],
        bankcard:{
            bankName:[{ required: true, message: '请输入开户名称', trigger: 'blur' }],
            bankcardNumber:[{ required: true, message: '请输入银行账户', trigger: 'blur' }],
            bankcardType:[{ required: true, message: '请输入开户银行', trigger: 'blur' }],
            address:[{ required: true, message: '请输入开户地址', trigger: 'blur' }],
            bankPhone:[{ required: true, message: '请输入开户预留电话', trigger: 'blur' }]
        }
      
      }
    }
  },
  computed:{
    setItem(){
      return this.$route.params.val
    }
  },
  created(){
      if(JSON.parse(this.$store.state.user.userInfo).userType != 0) {
     
    }else{
       this.rules.mchId = [{ required: true, message: '请选择所属商户', trigger: 'change' }]
    }
    this.provinceMethod()
    this.merchants()
    this.ruleForm.operationTime = this.getNowFormatDate()
    if(this.setItem){
      this.ruleForm = this.setItem
      this.ruleForm.provinceName = this.setItem.provinceName
      this.ruleForm.cityName = this.setItem.cityName
      this.ruleForm.districtName = this.setItem.districtName
      this.ruleForm.streetName = this.setItem.streetName
      this.ruleForm.address = this.setItem.address
      this.ruleForm.mchId = this.setItem.mchId
      this.valueId = this.setItem.mchName
      let logoObj = {name:'logo',url:this.imgBaseUrl+this.setItem.storeLogo}
      let storeImgObj = {name:'store',url:this.imgBaseUrl+this.setItem.storeImg}
      this.logoList.push(logoObj)
      this.storeImgList.push(storeImgObj)
      if(this.setItem.bindStatus == 0){this.value1 = true}
      else{this.value1 = false}
      this.ruleForm.bindStatus = this.setItem.bindStatus
      this.ruleForm.isPhysicalStore = this.setItem.isPhysicalStore
      if(this.setItem.isPhysicalStore == 1){this.value2 = true}
      else{this.value2 = false}
      let licenselmgObj = {name:'licensel',url:this.imgBaseUrl+this.setItem.licenseImg}
      this.licenseImgList.push(licenselmgObj)
      if(this.setItem.licenseImg || this.setItem.storeImg || this.setItem.storeLogo){
        let {logoImage, ...data} = this.rules.logoImage
        this.rules.logoImage = data
        let {storeImage, ...list} = this.rules.storeImage
        this.rules.storeImage = list
        let {licenseImage, ...res} = this.rules.licenseImage
        this.rules.licenseImage = res
      }
    }
  },
  methods: {
      sendEmail() {
          var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
          if (this.ruleForm.email != '' && !regEmail.test(this.ruleForm.email)) {
              this.$message({ message: '邮箱格式不正确',type: 'error' })
              this.emailForm.email = ''
          }
      },
    async merchants() {//获取商户列表
      let res = await getMerchantList({
      pageNum:this.pageNum,
      pageSize:this.pageSize,
      })
      if(res.code == 200){
        this.merchantName = res.data.list
      }
    },
   
   
    provinceChange(val) {//选择省时触发
      this.ruleForm.provinceName = val.name
      this.ruleForm.province = val.id
      this.cityData = val.children
    },
    cityNameChange(val) {//选择市时触发
      this.ruleForm.cityName = val.name
      this.ruleForm.city = val.id
      this.districtData = val.children
    },
  async districtChange(val) {//选择区的时候触发
      this.ruleForm.districtName = val.name
      this.ruleForm.district = val.id
      let streetRes = await streetMerchabt({parentId:val.id})
      if(streetRes.code == 200) {
        this.streetData = streetRes.data
      }
      console.log(streetRes)
    },
    streetChange(val) {//选择街道时触发
      this.ruleForm.streetName = val.name
      this.ruleForm.street = val.id
    },
    switchChange(val) {//绑定门店开关触发
      if(val == true){
        this.ruleForm.bindStatus = 0
        console.log( this.ruleForm.bindStatus)
      }else{
         this.ruleForm.bindStatus = 1
          console.log( this.ruleForm.bindStatus)
      }
    },
     switchChange2(val) {//线上店铺开关触发
      if(val == true){
        this.ruleForm.isPhysicalStore = 1
      }else{
         this.ruleForm.isPhysicalStore = 0
      }
    },
    async provinceMethod() {
      let res = await provinceMerchabt()
      if(res.code == 200) {
        this.provinceData = res.data
      }
    },
      logoPreview(file) {//查看门店logo
        this.logoImageUrl = file.url;
        this.logoDialog = true;
      },
     handleRemove(file, fileList) {//上传门店logo删除
        if(fileList.length == 0){
          this.rules.logoImage = [{ required: true, message: '请上传门店logo附件', trigger: 'change'}];
        }
      },
      handlePictureCardPreview(res,fileList,val) {//上传门店logo成功
      if(res.code == 200){
        this.$message({ message: '上传成功',type: 'success'})
        this.ruleForm.storeLogo = res.data.fileUrl
        if(val.length == 1) {
          let {logoImage, ...data} = this.rules.logoImage
          this.rules.logoImage = data
        }
         this.$refs.ruleForm.clearValidate('logoImage')
      }else{
         this.$message.error('上传失败');
      }
      },
      storeImgPreview(file) {//查看门店实景图
        this.storeImgUrl = file.url;
        this.storeImgDialog = true;
      },
      RemovebstoreImg(file, fileList) {//上传门店实景图删除
        if(fileList.length == 0){
          this.rules.storeImage = [{ required: true, message: '请上传门店实景图附件', trigger: 'change'}];
        }
      },
      handlestoreImg(res,fileList,val) {//上传门店实景图成功
     if(res.code == 200){
        this.$message({ message: '上传成功',type: 'success'});
        this.ruleForm.storeImg = res.data.fileUrl
        if(val.length == 1) {
          let {storeImage, ...data} = this.rules.storeImage
          this.rules.storeImage = data
        }
         this.$refs.ruleForm.clearValidate('storeImage')
      }else{
         this.$message.error('上传失败');
      }
      },
      licensePreview(file) {//查看营业执照
        this.licenseUrl = file.url;
        this.licenseDialog = true;
      },
      RemoveblicenseImg(file, fileList) {//上传营业执照删除
        if(fileList.length == 0){
          this.rules.licenseImage = [{ required: true, message: '请上传营业执照附件', trigger: 'change'}];
        }
      },
      handlelicenseImg(res,fileList,val) {//上传营业执照成功
      if(res.code == 200){
        this.$message({ message: '上传成功',type: 'success'});
        this.ruleForm.licenseImg = res.data.fileUrl
        if(val.length == 1) {
          let {licenseImage, ...data} = this.rules.licenseImage
          this.rules.licenseImage = data
        }
         this.$refs.ruleForm.clearValidate('licenseImage')
      }else{
         this.$message.error('上传失败');
      }
      },
    submitForm(formName) {
      console.log(1)
      this.$refs[formName].validate(valid => {
        console.log(12)
        if (valid) {
          console.log(123)
         this.addShop()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async addShop() {//新增与修改
    if(JSON.parse(this.$store.state.user.userInfo).userType != 0) {
      this.ruleForm.mchId = JSON.parse(this.$store.getters.userInfo).mchId
    }
      if(this.setItem){
        let reviseRes = await reviseShopMerchabt(this.ruleForm)
         this.$message({ message: '修改成功',type: 'success'})
         this.$router.back()
      }else{
        console.log(this.ruleForm)
        let addshopRes = await addShopMerchabt(this.ruleForm)
        if(addshopRes.code == 200) {
          this.$message({ message: '新增成功',type: 'success'})
          this.$router.back()
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.all {
  box-sizing: border-box;
  padding: 15px;
}
.informa {
  width: 100%;

  height: auto;
  background-color: #fff;
  background-color: #fff;
  margin-top: 25px;
  border-radius: 6px;
  padding: 15px;
  -webkit-box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  padding-bottom: 40px;
}
 .phones ::v-deep .el-form-item__content {
   display: inline-flex;
} 
 .informa ::v-deep .el-form-item__label {
   width: 150px !important;
 } 
.el-form-item{
  display: inline;
}
 .el-input{
  width:40vw !important;
  
}
.el-form-item__label{
  padding:0px !important;
}
.tetli{
  height: 60px;
  line-height: 60px;
  font-weight: bold;
  border-bottom: 2px solid #F6F6F6;
  margin-bottom: 30px;
}
.aptitudes{
 .updata{
   display: inline-block;
   width:40%;
 }
}
.select{
   width: 15vw !important;
}
.merchantsId{
    margin-left:1vw;
    width: 24vw !important;
}
.submit{
    margin-top:20px;
    text-align: center;
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

</style>
